<script setup lang="ts">
const data = ref([
  { value: 67, name: 'A' },
  { value: 40, name: 'B' },
  { value: 120, name: 'C' },
  { value: 58, name: 'D' },
  { value: 85, name: 'E' }
])
setInterval(() => {
  data.value = data.value.map((item) => ({
    ...item,
    value: Math.random() * 100
  }))
}, 1000)
const option = computed(() => {
  return {
    xAxis: {
      type: 'category',
      data: data.value.map((el) => el.name)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data.value.map((el) => el.value),
        type: 'line'
      }
    ]
  }
})
</script>

<template>
  <div>
    <e-charts class="chart" :option="option" />
  </div>
</template>

<style lang="scss" scoped>
.chart {
  height: 400px;
}
</style>
